<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="pragma" content="no-cache"> 
	<meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 
    <title></title>
    <link rel="stylesheet" href="/resources/layui-v2.0.1/css/layui.css">
	<link rel="stylesheet" href="/resources/css/base.css">
    <script src="/resources/layui-v2.0.1/layui.js"></script>
    <script src="http://static.kaoshidian.com/common/js/jquery-3.0.0.js"></script>
    
</head>
<body>
	<div class="layui-main">
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			<legend>用户信息</legend>
		</fieldset>
		<div class="demoTable">
			<label>搜索ID：</label>
			<div class="layui-inline">
				<input class="layui-input" name="id" id="userId">
			</div>
			<label>用户名：</label>
			<div class="layui-inline">
				<input class="layui-input" name="username" id="username">
			</div>
			<button class="layui-btn" data-type="reload" onclick="search();">搜索</button>
		</div>
		<table class="layui-table" id="list0">
			
		</table> 
	
	</div>
	
	<script>
		//JavaScript代码区域
		layui.use('element', function(){
		  var element = layui.element;
		  
		});
		var tableIns;
		layui.use('table', function(){
		  	var table = layui.table;
		  	tableIns = table.render({
			  	elem: '#list0',
			  	cols:  [[ //标题栏
			  	        {checkbox: true},
			  	        {field:'id', title:'ID',width:80, sort: true},
			  	        {field:'username',title:'用户名', width:200},
			  	      	{field:'mobile', title:'手机号',width:200},
			  	    	{field:'userType', title:'用户类型',width:120},
			  	    	{field:'createTime', title:'创建时间',width:200}
			  	      ]],
			  	height:700,
			  	page:true,
			  	limit:20,
			  	url:'/member/list'
			});
		});
		
		function search(){
			var uid = $("#userId").val();
			var username = $("#username").val();
			tableIns.reload({
			  where: { //设定异步数据接口的参数
			    id: uid
			    ,username:username
			  }
			});
		}
		
	</script>
</body>
</html>